<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示模式</title>
		<link href="css/displayStyle.css" rel="stylesheet"/>
	</head>
	<body>
		<!--
		 元素的显示：
		1.块元素block 
		  比较霸道，单独占一行
		  默认的宽度和父级元素宽度的100%
		  可以给盒子设置宽、高
		  可以设置对齐属性
		  块元素内可以包含其他块元素和行内元素
		  块元素例如：div，ul，ol，li，p，h1~h6
		2.行内元素inline
		  一行显示多个
		  默认的宽度就是内容的宽度
		  宽、高属性无效
		  不能设置对齐属性
		  行内元素只包含文本或其他行内元素
		  行内元素例如：span，a，del，strong
		3.行内块元素inline-block
		  一行显示多个，两个行内块元素之间有一定的空白间距
		  默认的宽度就是内容的宽度
		  可以给盒子设置宽、高
		  行内块元素例如：input，img，td
		元素显示模式的转换：
		  display：模式名称；
		-->
		<div class="box">hello box</div>
		<p class="box">hello 段落</p>
		<h1>一级段落</h1>
		<span class="box">hello span</span>
		<del>hello 删除线</del>
	</body>
</html>
